<template>
    <div>
        <div class="echartBox">
            <div id="chart" style="height:350px;width:100%;"></div>
        </div>
        <div class="tableBox">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%"
             :showsummary="false" :columns="tableColumns"
              :tableData="rowData" highlight-current-row :ifSelect="false"
              :current="false" :pageNum="pageNo" :pageSize="pageSize" :totalPage="total" 
              :height="$store.state.app.windowHeight - 210" max-height="660px" 
              @onCurrentChange="changepageNos" @onPageSizeChange="changePageSizes"  />
        </div>
    </div>
</template>


<script>
import * as echarts from "echarts";
export default {
    name: 'cgsl',
    props: {
        cgsl: {
            type: Array, default: function () {
                return []
            }
        },
        pageNo: {
            type: Number, default: function () {
                return 1
            }
        },
        pageSize: {
            type: Number, default: function () {
                return 20
            }
        },
        total: {
            type: Number, default: function () {
                return 0
            }
        },
        rowData: {
            type: Array, default: function () {
                return []
            }
        }
    },
    data() {
        return {
            loading: false,


        
            tableColumns: [
                {
                    label: '商品名称',
                    prop: 'hwhlwmc',
                    align: 'center',

                },
                {
                    label: '月份',
                    prop: 'yf',
                    align: 'center',

                },
                {
                    label: '采购数量',
                    prop: 'sl',
                    align: 'center',

                },
                {
                    label: '采购金额(元)',
                    prop: 'jshj',
                    align: 'center',
                },



            ],

        }
    },
    mounted() {
        // this.init()
    },
    watch: {
        cgsl: {
            handler(newVal, oldVal) {
                this.init(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        init(newVal) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                let chart = echarts.init(document.getElementById('chart'));
                let dates = [],
                    cgje = [],
                    xsje = [],
                    dataA = [],
                    gxce = [];
                for (let i = 0; i < newVal.length; i++) {
                    dates[i] = newVal[i]['kprq'];
                    cgje[i] = newVal[i]['sl'];
                }
                dataA = [{
                    name: '采购数量',
                    data: cgje
                }
                ]


                const arrs = [];
                const arr = [];
                const arrName = [];
                for (let i = 0; i < dataA.length; i++) {
                    if (i < dataA.length - 1) {
                        arr[i] = {
                            name: dataA[i].name,
                            type: 'bar',
                            barWidth: 20,
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: dataA[i].data
                        }
                    } else {
                        arr[i] = {
                            name: dataA[i].name,
                            type: 'bar',
                            barWidth: 20,
                            // stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: dataA[i].data
                        }
                    }
                    arrName[i] = dataA[i].name

                }
                arrs['data'] = arr;
                arrs['name'] = arrName;

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        itemWidth: 18,
                        itemHeight: 12,
                        icon: "rect",
                        top: '8%',
                        left: '45%', //图例距离左的距离
                        textStyle: {
                            'color': '#000'
                        },
                        data: arrName,

                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        top: '20%',
                        bottom: '10%',
                        containLabel: true,

                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {
                            show: true,
                            fontSize: 14,
                            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                            textStyle: {
                                color: "#000",

                            }
                        },

                        axisLine: {
                            show: true,
                            onZero: true,
                            onZeroAxisIndex: null,
                            lineStyle: {
                                color: '#B9B8CE',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        splitLine: { //分割线
                            lineStyle: {
                                color: "#B9B8CE",
                                width: 1,
                                type: "solid"
                            }
                        },
                        data: dates
                    }],
                    yAxis: [{
                        type: 'value',
                        // name: '单位：万元',
                        nameTextStyle: {
                            color: '#000'
                        },
                        axisLabel: {

                            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                            fontSize: 14,
                            margin: 8,
                            textStyle: {
                                color: '#000'
                            }
                        },
                        axisLine: {
                            show: true,

                            onZero: true,
                            onZeroAxisIndex: null,

                        }
                    }],
                    // color: color,
                    // gradientColor: ["#f6efa6", " #d88273", '#bf444c'],
                    series: arr

                }



                chart.setOption(option)
            })
        },
        changepageNos(currPage) {
            console.log(currPage)
            this.$emit('changepageNum',currPage)

        },
        changePageSizes(pageSize) {
             console.log(pageSize)
            this.$emit('changePageSi',pageSize)
        },
    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
}
</style>